<template>
  <div id="chart" style="width: 100%; height: 350px"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from '../../mixins/resize';
import { getProduct } from '@/api/home';

export default {
  name: 'productionPipChart',
  mixins: [resize],
  data() {
    return {
      chart: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      const { projectId } = this.$store.getters;
      const chartDom = document.getElementById('chart');
      this.chart = echarts.init(chartDom);
      this.chart.showLoading();
      const option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: 20,
          icon: 'circle',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            labelLine: {
              smooth: 1,
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      getProduct({ projectId })
        .then(res => {
          const { data } = res || {};
          option.series[0].data = (data || []).map(item => {
            return {
              name: item.name,
              value: item.val,
            };
          });
          this.chart.setOption(option);
        })
        .finally(() => {
          this.chart.hideLoading();
        });
    },
  },
};
</script>
